const path = require('path') // 导入处理路径的模块 要导入本地文件要这个模块

const HtmlPlugin = require('html-webpack-plugin') // 导入第8个功能所需的插件  01
const { plugins } = require('./babel.config')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 导入第8个功能所需的插件  02
const html = new HtmlPlugin({
  template: './src/index.html', // 指定原文件的存放路径
  filename: './index.html' // 指定生成的文件的存放路径
})

// 向外导出一个webpack的配置对象
module.exports = {
  devtool: 'nosources-source-map', // 在开发调式下设置 对应 13
  // 1. mode 代表 webpack 运行的模式 有两个选项： development (开发阶段)  production (发布阶段,代码压缩)
  mode: 'development',
  // 2.自定义打包的入口与出口 修改默认约定
  // __dirname 根目录  指 webpack这个目录
  // 修改默认打包入口文件为: Home.js
  entry: path.join(__dirname, './src/Home.js'),
  // 修改默认输出的文件名叫什么
  output: {
    path: path.join(__dirname, './dist'), // 哪个目录
    filename: 'js/main.js' // 什么名字
  },

  // // 导入第8个功能所需的插件  03
  plugins: [html, new CleanWebpackPlugin()], // 通过该节点，使插件生效

  // 09 对应的功能 初次运行项目自动打开浏览器
  devServer: {
    open: true,
    host: '192.168.1.106', // 指定主机地址
    port: 80 // 打包时用的端口号
  },

  // 10 对应的功能  下载loader加载器，处理 css ，less 图片 等文件
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // css
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // less
      // ?limt=470 如果图片大于470字节不会转为base64格式的图片 只有图片大小 小于等于470才会被转为base64格式的图片
      { test: /\.jpg|png|gif$/, use: 'url-loader?limt=470&outPath=images' }, // 图片
      //exclude: /node_modules/ 在配置 babel-loader的时候 ，排除到 node_module 目录中的js文件
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 处理js高级语法
    ]
  }
}
